<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style>
			input::-webkit-search-cancel-button {
				display: none;
			}
			
			input::-ms-clear {
				display: none;
			}
			
			.area {
				margin: 0px auto 0px auto;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
				background-color: deepskyblue;
			}
			
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			
			.mui-input-group label {
				width: 30%;
			}
			
			.mui-input-row {
				position: relative;
				margin: -8px;
			}
			
			.mui-input-row label {
				float: left;
				width: 31%;
				color: #AAAAAA;
			}
			
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 40%;
				float: left;
			}
			
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			
			.mui-content-padded {
				margin-top: 25px;
			}
			
			.mui-btn {
				height: 40px;
				padding: 5px;
			}
			
			#return {
				float: left;
				width: 43%;
				border: none;
				background-color: #AAAAAA;
				height: 35px;
				margin-top: 10px;
			}
			
			#Determine {
				float: right;
				width: 53%;
				border: none;
				height: 35px;
				margin-top: 10px;
				background-color: deepskyblue;
			}
			
			#sliderSegmentedControl a.mui-active {
				color: deepskyblue;
			}
			
			#Sendauthenticationcode {
				width: 80px;
				float: right;
				padding: 10px;
			}
			
			#showpasswordeye1 {
				width: 20px;
				float: right;
				margin: 13px;
			}
			
			#Sendauthenticationcode {
				font-size: 11px;
				font-weight: 600;
				color: deepskyblue;
				float: right;
				padding: 10px;
				border: 1px solid deepskyblue;
				border-radius: 10px;
				width: 85px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">找回密码</h1>
		</header>

		<style>
			.mui-control-content {
				background-color: white;
				min-height: 140px;
			}
			
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
		</style>

		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#item1mobile">
						通过手机找回
					</a>
					<a class="mui-control-item" href="#item2mobile">
						通过邮箱找回
					</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
				<div class="mui-slider-group" id="group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll" id="box0">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell">
										<div class="mui-input-row">
											<label>手机号:</label>
											<input type="button" id="Sendauthenticationcode" value="发送验证码" onclick="sendSmsCode('phoneNum',this,'getResetPhoneCode')"></span>
											<input id='phoneNum' type="number" class="mui-input" required="required" oninvalid="请输入手机号" requiredGroup=0>
										</div>
									</li>
									<li class="mui-table-view-cell">
										<div class="mui-input-row">
											<label>短信验证码:</label>
											<input id='smsCode' type="number" class="mui-input" required="required" oninvalid="请输入短信验证码" requiredGroup=0>
										</div>
									</li>
									<li class="mui-table-view-cell">
										<div class="mui-input-row">
											<label id="passwordc">输入新密码:</label>
											<input type="image" id="showpasswordeye1" src="images/login/闭眼.png" onclick="showPassWord('password_confirm',this);return false;">
											<input id='password' type="password" class="mui-input" required="required" oninvalid="请输入新密码" requiredGroup=0>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll" id="box1">
								<div class="mui-table-view">
									<ul class="mui-table-view">
										<li class="mui-table-view-cell">
											<div class="mui-input-row">
												<label>邮箱:</label>
												<input id='email' type="email" class="mui-input" required="required" oninvalid="请输入邮箱" requiredGroup=1>
											</div>
										</li>
										<li class="mui-table-view-cell">
											<div class="mui-input-row">
												<label>验证码:</label>
												<input id="code_input" type="text" class="mui-input" required="required" oninvalid="请输入验证码" requiredGroup=1>
												<div id="v_container" style="width: 100px;height: 30px;float: right;">
													<img src="http://47.92.130.190/captcha/default" onclick="this.src='http://47.92.130.190/captcha/default?d='+Math.random();" width="120" height="36" id="verifyCanvas" style="cursor: pointer;"></img>
												</div>
											</div>
										</li>
									</ul>
								</div>

							</div>
						</div>

					</div>
				</div>
			</div>
			<div class="mui-content-padded">
				<button id='return' class="mui-btn mui-btn-block mui-btn-primary mui-action-back">返回登录</button>
				<button id='Determine' class="mui-btn mui-btn-block mui-btn-primary" onclick="onRegister()">修改密码</button>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.1.0.js"></script>
		<script src="js/gVerify.js"></script>
		<script src="js/zcy.js"></script>
		<script>
		</script>
		<script src="js/app.js"></script>
		<script>
			(function($, doc) {
				$.init();
				$.plusReady(function() {
					var settings = app.getSettings();
					var regButton = doc.getElementById('reg');
					var accountBox = doc.getElementById('account');
					var passwordBox = doc.getElementById('password');
					var passwordConfirmBox = doc.getElementById('password_confirm');
					var emailBox = doc.getElementById('email');
					regButton.addEventListener('tap', function(event) {
						var regInfo = {
							account: accountBox.value,
							password: passwordBox.value,
							email: emailBox.value
						};
						var passwordConfirm = passwordConfirmBox.value;
						if(passwordConfirm != regInfo.password) {
							plus.nativeUI.toast('密码两次输入不一致');
							return;
						}
						app.reg(regInfo, function(err) {
							if(err) {
								plus.nativeUI.toast(err);
								return;
							}
							plus.nativeUI.toast('注册成功');
							$.openWindow({
								url: 'login.html',
								id: 'login',
								show: {
									aniShow: 'pop-in'
								}
							});
						});
					});
				});
			}(mui, document));

			var type = 0;

			function onRegister() {
				switch(type) {
					case 0:
						if(!validate(0)) return false;
						var smsPhoneNumTextBox = $("#phoneNum");
						var smsCodeTextBox = $("#smsCode");
						var smspassWordTextBox = $("#password");
						$.zcypost("resetByPhone", {
							phone: smsPhoneNumTextBox.val(),
							password: smspassWordTextBox.val(),
							code: smsCodeTextBox.val()
						}, function(d) {
							mui.toast('修改成功！');
							setTimeout(function() {
								location.href = ('login.html')
							}, 500);
						});
						break;
					case 1:
						if(!validate(1)) return false;
						var emailTextBox = $("#email");
						var codeTextBox = $("#code_input");
						$.zcypost("getResetEmail", {
							email: emailTextBox.val(),
							captcha: codeTextBox.val(),
						}, function(d) {
							mui.toast('验证邮件已经发送，请注意查收！');
							setTimeout(function() {
								location.href = ('login.html')
							}, 500);
						});
						break;
					default:
						break;
				}
			}
			$(function() {


				document.querySelector('.mui-slider').addEventListener('slide', function(e) {
					var aaa = document.getElementById("box" + e.detail.slideNumber).offsetHeight;
					document.getElementById("group").style.height = aaa + "px";

					if(event.detail.slideNumber === 0) {
						$("#Determine").html("修改密码");
						type = 0;
					} else if(event.detail.slideNumber === 1) {
						$("#Determine").html("发送邮件");
						type = 1;
					}
				});
			})
		</script>
	</body>

</html>